

<template>
  <div :class="['MenDianListPage',showOrHideCls]">
    <div class="view">
      <div class="mendzsDiv">
        <template v-if="oneData.data!==null">
          <div class="zhans1_0Div" v-if="oneData.data.length>0">
            <div class="title1">
              <img src="img/mend/v1.0.png">
            </div>
            <ul class="ulzhans">
              <li v-for="(item,index) in oneData.data" :key="index" @click="toggleClick(item.id)" :iid="item.id">
                <div class="div fangda_div">
                  <img :src='item.imgUrl' class="fangda_E" :alt="item.imgAlt" :title="item.imgTitle">
                </div>
                <div class="name">
                  <div class="zc">
                    <img src="img/mend/add.png">
                    <div class="txt">{{item.title}}</div>
                  </div>
                </div>
                <div class="nameHo">
                  <div class="zc">
                    <img src="img/mend/add.png">
                    <div class="txt">{{item.title}}</div>
                  </div>
                  <div class="xq">
                    查看详情>
                  </div>
                </div>
              </li>
            </ul>
          </div>

          <div class="zhans2_0Div" v-if="twoData.data.length>0">
            <div class="title2">
              <img src="img/mend/v2.0.png">
            </div>
            <ul class="ulzhans">
              <li v-for="(item,index) in twoData.data" :key="index" @click="toggleClick(item.id)" :iid="item.id">
                <div class="div fangda_div">
                  <img :src='item.imgUrl' class="fangda_E" :alt="item.imgAlt" :title="item.imgTitle">
                </div>
                <div class="name">
                  <div class="zc">
                    <img src="img/mend/add.png">
                    <div class="txt">{{item.title}}</div>
                  </div>
                </div>
                <div class="nameHo">
                  <div class="zc">
                    <img src="img/mend/add.png">
                    <div class="txt">{{item.title}}</div>
                  </div>
                  <div class="xq">
                    查看详情>
                  </div>
                </div>
              </li>
            </ul>
          </div>

        </template>
      </div>
    </div>
  </div>
</template>


<style scoped>
.MenDianListPage{
  position: relative;
}

.view{
  font-size: 16px;margin: auto;
  max-width: 1200px;min-width: 1200px;
}
.view div{
  position: relative;
}
.mendzsDiv{
  position: relative;width: 100%;
}
.mendzsDiv .title1{
  position: relative;width: 443px;height: 111px;margin: auto;
}
.mendzsDiv .title1 img{
  position: relative;width: 443px;height: 111px;
}
.mendzsDiv .title2{
  position: relative;width: 455px;height: 92px;margin: auto;
}
.mendzsDiv .title2 img{
  position: relative;width: 455px;height: 92px;
}

.zhans1_0Div{
  padding-top: 80px;
}
.zhans2_0Div{
  padding-bottom: 160px;padding-top: 93px;
}

.ulzhans{
  position: relative;margin: auto;    padding-top: 70px;
  display:flex;display: -webkit-flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;
}
.ulzhans li{
  position: relative;cursor: pointer;
  /*width: 360px;height: 230px;padding: 20px;*/
  width: 31%;padding: 1%;

}
.ulzhans li:hover{
  background: #F3F3A5;
.name{
  display: none;
}
.nameHo{
  display:block;
}
}

.ulzhans li .div{
  position: relative;
}
.ulzhans li .div img{
  position: relative;width: 100%;
}
.ulzhans li  .name{
  font-size: 24px;color: #3F4044;line-height: 65px;
}
.ulzhans li  .name .zc{
  display:flex;display: -webkit-flex;flex-direction:row;justify-content:center;
}
.ulzhans li  .name .zc img{
  width: 25px;height: 25px;padding-top: 20px;
}
.ulzhans li  .name .zc .txt{
  color: #3F4044;padding-left: 10px;
}

.ulzhans li  .nameHo{
  font-size: 24px;color: #3F4044;line-height: 65px;display: none;
}
.ulzhans li  .nameHo .zc{
  display:flex;display: -webkit-flex;flex-direction:row;justify-content:center;
  position: absolute;left: 0;top:0;
}
.ulzhans li  .nameHo .zc img{
  width: 25px;height: 25px;padding-top: 20px;
}
.ulzhans li  .nameHo .zc .txt{
  color: #84AE4C;padding-left: 10px;
}
.ulzhans li  .nameHo .xq{
  text-align: right;
}
</style>

<script setup>
/*组件挂载完成后执行的函数；*/
import {ref,reactive,watch,computed,onBeforeUnmount, onMounted, onUnmounted} from "vue";
import { useStore} from 'vuex';
import Enum from "@/js/Enum";


let store = useStore();
/**1.0店面数据**/
let oneData=reactive({data:null});
let twoData=reactive({data:null});

onMounted(() => {
  console.log("MenDianListPage onMounted 门店风采二级页面 列表初始化");
  window.scrollTo(0, 0);
  setDataHandler();
});


onBeforeUnmount(() => {
  console.log('MenDianListPage onBeforeUnmount');
})
onUnmounted(() => {
  //卸载组件实例后调用,调用此钩子时,组件实例的所有指令都被解除绑定,所有事件侦听器都被移除,所有子组件实例被卸载。
  console.log("MenDianListPage onUnmounted 卸载组件实例后  ");
});
let showOrHideCls=ref('');

let is_datastaue=false;
let datastaue=computed(()=>{return store.state.mendianData;});
watch(datastaue,(newValue,oldValue)=>{
  if(is_datastaue)return;
  is_datastaue=true;
  setDataHandler();
});

let setDataHandler=()=>{
  if(oneData.data!=null || store.state.mendianData==null)return;
  oneData.data=store.state.mendianData[0].dataList;
  twoData.data=store.state.mendianData[1].dataList;
  console.log("MenDianListPage setDataHandler");
}

let toggleClick=(id)=>{
  console.log("MenDianListPage toggleClick",id);
  store.state.mendDPages.url=Enum.mendfc_details;
  store.state.mendDPages.data={id:id}
  store.state.mendDPages.status++;
}
</script>





